<!-- 富文本编辑器模态框 -->
<div class="modal fade" id="richTextModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">富文本编辑器</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body richtext-body">
                <!-- 工具栏 - 现代编辑器风格 -->
                <div class="richtext-toolbar">
                    <!-- 标题预设 -->
                    <div class="toolbar-group">
                        <button class="toolbar-btn" data-preset="h1" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('h1')" title="标题1 (# )">
                            <span class="btn-text">H1</span>
                        </button>
                        <button class="toolbar-btn" data-preset="h2" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('h2')" title="标题2 (## )">
                            <span class="btn-text">H2</span>
                        </button>
                        <button class="toolbar-btn" data-preset="h3" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('h3')" title="标题3 (### )">
                            <span class="btn-text">H3</span>
                        </button>
                        <button class="toolbar-btn" data-preset="h4" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('h4')" title="标题4 (#### )">
                            <span class="btn-text">H4</span>
                        </button>
                    </div>

                    <div class="toolbar-divider"></div>

                    <!-- 文本样式预设 -->
                    <div class="toolbar-group">
                        <button class="toolbar-btn" data-preset="bold" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('bold')" title="加粗 (**文本**)">
                            <span class="btn-text" style="font-weight: bold;">B</span>
                        </button>
                        <button class="toolbar-btn" data-preset="underline" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('underline')" title="下划线">
                            <span class="btn-text" style="text-decoration: underline;">U</span>
                        </button>
                        <button class="toolbar-btn" data-preset="strike" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('strike')" title="删除线 (~~文本~~)">
                            <span class="btn-text" style="text-decoration: line-through;">S</span>
                        </button>
                    </div>

                    <div class="toolbar-divider"></div>

                    <!-- 高级格式按钮 -->
                    <div class="toolbar-group">
                        <input type="color" id="text-color-picker" value="#000000" title="文字颜色">
                        <button class="toolbar-btn" onclick="RichTextEditor.toggleAdvancedPanel('size')" title="字号">
                            <span class="btn-text">字号</span>
                        </button>
                        <button class="toolbar-btn" onclick="RichTextEditor.toggleAdvancedPanel('textStyle')" title="文字样式">
                            <span class="btn-text">样式</span>
                        </button>
                        <button class="toolbar-btn" onclick="RichTextEditor.toggleAdvancedPanel('outline')" title="描边">
                            <span class="btn-text">描边</span>
                        </button>
                        <button class="toolbar-btn" onclick="RichTextEditor.toggleAdvancedPanel('effect')" title="特效">
                            <span class="btn-text">特效</span>
                        </button>
                    </div>

                    <div class="toolbar-divider"></div>

                    <!-- 列表 -->
                    <div class="toolbar-group">
                        <button class="toolbar-btn" data-preset="ul" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('ul')" title="无序列表 (- )">
                            <span class="btn-text">• 列表</span>
                        </button>
                        <button class="toolbar-btn" data-preset="ol" onmousedown="event.preventDefault(); RichTextEditor.applyPreset('ol')" title="有序列表 (1. )">
                            <span class="btn-text">1. 列表</span>
                        </button>
                    </div>

                    <div class="toolbar-divider"></div>

                    <!-- 清除格式 -->
                    <button class="toolbar-btn" onclick="RichTextEditor.removeFormat()" title="清除格式">
                        <span class="btn-text">清除</span>
                    </button>
                </div>

                <!-- 高级格式次级面板 -->
                <div class="advanced-panel" id="advanced-panel" style="display: none;">
                    <!-- 字号面板 -->
                    <div class="panel-content" data-panel="size" style="display: none;">
                        <label>字号：</label>
                        <input type="range" id="size-slider" min="12" max="72" value="16" step="1">
                        <span id="size-value">16</span>
                    </div>

                    <!-- 文字样式面板 -->
                    <div class="panel-content" data-panel="textStyle" style="display: none;">
                        <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
                            <!-- 下划线颜色 -->
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <label>下划线：</label>
                                <input type="color" id="underline-color-picker" value="#000000">
                                <button class="btn btn-sm btn-primary" onclick="RichTextEditor.applyAdvanced('underlineColor')">应用</button>
                            </div>
                            <!-- 删除线颜色 -->
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <label>删除线：</label>
                                <input type="color" id="strike-color-picker" value="#ff0000">
                                <button class="btn btn-sm btn-primary" onclick="RichTextEditor.applyAdvanced('strikeColor')">应用</button>
                            </div>
                        </div>
                    </div>

                    <!-- 描边面板 -->
                    <div class="panel-content" data-panel="outline" style="display: none;">
                        <label>描边颜色：</label>
                        <input type="color" id="outline-color-picker" value="#000000">
                        <label>描边宽度：</label>
                        <input type="range" id="outline-width-slider" min="0" max="5" value="2" step="0.5">
                        <span id="outline-width-value">2</span>
                        <button class="btn btn-sm btn-primary" onclick="RichTextEditor.applyAdvanced('outline')">应用</button>
                    </div>

                    <!-- 特效面板 -->
                    <div class="panel-content" data-panel="effect" style="display: none;">
                        <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
                            <!-- 发光效果 -->
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <label>发光：</label>
                                <input type="color" id="glow-color-picker" value="#ffff00">
                                <label>强度：</label>
                                <input type="range" id="glow-intensity-slider" min="0" max="3" value="1" step="0.1">
                                <span id="glow-intensity-value">1.0</span>
                                <button class="btn btn-sm btn-primary" onclick="RichTextEditor.applyAdvanced('glow')">应用发光</button>
                            </div>
                            <!-- 阴影效果 -->
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <label>阴影：</label>
                                <input type="color" id="shadow-color-picker" value="#000000">
                                <label>X:</label>
                                <input type="number" id="shadow-x" value="2" style="width: 50px;">
                                <label>Y:</label>
                                <input type="number" id="shadow-y" value="2" style="width: 50px;">
                                <button class="btn btn-sm btn-primary" onclick="RichTextEditor.applyAdvanced('shadow')">应用阴影</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 模式切换 -->
                <div class="mode-switcher">
                    <button class="mode-btn active" data-mode="preview" onclick="RichTextEditor.switchMode('preview')">预览模式</button>
                    <button class="mode-btn" data-mode="code" onclick="RichTextEditor.switchMode('code')">代码模式</button>
                    <button class="mode-btn" data-mode="split" onclick="RichTextEditor.switchMode('split')">分屏模式</button>
                </div>

                <!-- 编辑区域容器 -->
                <div class="richtext-container" data-mode="preview">
                    <!-- 预览区（可编辑） -->
                    <div class="richtext-preview" id="richtext-preview" contenteditable="true" spellcheck="false"></div>

                    <!-- 代码编辑区 -->
                    <textarea class="richtext-editor" id="richtext-editor" spellcheck="false"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="RichTextEditor.confirm()">确定</button>
            </div>
        </div>
    </div>
</div>
